<template>
	<view class="restmoney-box">
		<view class="restmoney-box-top">
			<u-navbar title="余额" bgColor="rgba(254, 126, 41, 0.00)" titleStyle="color: #000;font-size: 32rpx;"
				leftIconSize="36rpx" leftIconColor="#000" @leftClick="goBack">

			</u-navbar>

			<view :style="'margin-top: '+mgTop+'px;padding-top:20rpx;'">

				<!-- 卡片组件 -->
				<MoneyCard :name="'余额'" :number="960.32">
					<view class="carry-cash" @click="goCarryCash">提现</view>
				</MoneyCard>

				<view style="padding: 0 0 40rpx;">
					<u-tabs :list="tabsList" lineWidth="32rpx" lineHeight="8rpx" lineColor="#FF7803" :scrollable="false"
						:activeStyle="{
							color: '#333',
							fontWeight: '500',
							fontSize: '32rpx'
						}" :inactiveStyle="{
							color: '#999',
							fontSize: '28rpx'
						}" @click="clickTabs">
					</u-tabs>
				</view>
			</view>
		</view>

		<scroll-view scroll-y="true" :style="'height: '+scrollHeight+'px;'">
			<!-- 明细 -->
			<view class="show-data-item" v-for="(item,index) in showData" :key="index">
				<view class="left">
					<view class="left-name">
						{{item.name}}
					</view>
					<view class="left-time">
						{{item.time}}
					</view>
				</view>
				<view class="right">
					{{item.num}}
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import MoneyCard from '../../components/common/MoneyCard.vue'
	export default {
		data() {
			return {
				mgTop: 0,

				tabsList: [{
					name: '余额收入'
				}, {
					name: '余额支出'
				}],

				// 展示数据
				showData: [],

				// 滚动高度
				scrollHeight: 0,

				// 爆点获取数据
				dataAdd: [{
					name: '寄售中心交易',
					time: '2050-08-05 19:58:18',
					num: '+100'
				}, {
					name: '寄售中心交易',
					time: '2050-08-05 19:58:18',
					num: '+200'
				}, {
					name: '寄售中心交易',
					time: '2050-08-05 19:58:18',
					num: '+10'
				}, {
					name: '寄售中心交易',
					time: '2050-08-05 19:58:18',
					num: '+500'
				}, {
					name: '寄售中心交易',
					time: '2050-08-05 19:58:18',
					num: '+10'
				}, {
					name: '寄售中心交易',
					time: '2050-08-05 19:58:18',
					num: '+500'
				}, {
					name: '寄售中心交易',
					time: '2050-08-05 19:58:18',
					num: '+10'
				}, {
					name: '寄售中心交易',
					time: '2050-08-05 19:58:18',
					num: '+500'
				}, {
					name: '寄售中心交易',
					time: '2050-08-05 19:58:18',
					num: '+10'
				}, {
					name: '寄售中心交易',
					time: '2050-08-05 19:58:18',
					num: '+500'
				}],

				// 爆点使用数据
				dataCut: [{
					name: '寄售中心交易，手续费',
					time: '2050-08-05 19:58:18',
					num: '-399'
				}, {
					name: '充值爆点',
					time: '2050-08-05 19:58:18',
					num: '-399'
				}, {
					name: '抽盒',
					time: '2050-08-05 19:58:18',
					num: '-399'
				}]
			}
		},
		methods: {
			goCarryCash() {
				uni.navigateTo({
					url: '/pages/restmoney/CarryCash'
				})
			},
			clickTabs(item) {
				if (item.name === this.tabsList[0].name) {
					this.showData = this.dataAdd
				} else {
					this.showData = this.dataCut
				}
			},
			goBack() {
				uni.navigateBack()
			}
		},
		components: {
			MoneyCard
		},
		mounted() {
			this.showData = this.dataAdd

			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.mgTop = menuButtonInfo.bottom

			// 设备高度
			let screenHeight = uni.getSystemInfoSync().screenHeight

			// 顶部高度
			const query = uni.createSelectorQuery().in(this)
			query.select('.restmoney-box-top').boundingClientRect(data => {

				this.scrollHeight = screenHeight - data.height - menuButtonInfo.bottom
			}).exec()
			// #endif

			// #ifdef APP-PLUS
			this.mgTop = uni.getSystemInfoSync().statusBarHeight + 44
			// 设备高度
			let screenHeight = uni.getSystemInfoSync().screenHeight

			// 顶部高度
			const query = uni.createSelectorQuery().in(this)
			query.select('.restmoney-box-top').boundingClientRect(data => {
				this.scrollHeight = screenHeight - data.height - data.top
			}).exec()
			// #endif

		}
	}
</script>

<style lang="scss" scoped>
	.restmoney-box {
		position: relative;
		width: 100vw;

		&::before {
			position: absolute;
			top: -212rpx;
			left: -212rpx;
			content: '';
			display: block;
			width: 424rpx;
			height: 424rpx;
			border-radius: 50%;
			opacity: 1;
			background: #FF9C47;
			filter: blur(300rpx);
			z-index: -99;
		}

		&::after {
			position: absolute;
			top: -117rpx;
			right: -117rpx;
			content: '';
			display: block;
			width: 234rpx;
			height: 234rpx;
			border-radius: 50%;
			opacity: 1;
			background: #FFF200;
			filter: blur(300rpx);
			z-index: -99;
		}

		.restmoney-box-top {
			position: sticky;
			top: 0;
			width: 100vw;
			// overflow: hidden;
			// z-index: 99;
		}

		.carry-cash {
			width: 112rpx;
			height: 56rpx;
			border-radius: 32rpx;
			margin-top: 40rpx;
			font-size: 24rpx;
			font-weight: 600;
			color: #FF7803;
			border: 1rpx solid #FF7803;
			text-align: center;
			line-height: 56rpx;
		}

		.show-data-item {
			display: flex;
			justify-content: space-between;
			padding: 32rpx 40rpx;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 26rpx;
			color: #333;

			.left {
				.left-time {
					margin-top: 16rpx;
					font-size: 24rpx;
					line-height: 24rpx;
					color: #999;
				}
			}

			.right {
				font-size: 32rpx;
				line-height: 44rpx;
				text-align: right;
			}

			&:last-child {
				// 小程序 底部
				// 兼容 IOS 11.2 以下
				// padding-bottom: constant(safe-area-inset-bottom);
				// 兼容 IOS 11.2 以上
				// padding-bottom: env(safe-area-inset-bottom);

				// 预设一个高度
				padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
				padding-bottom: calc(18rpx + env(safe-area-inset-bottom));
			}
		}
	}
</style>